---
title: Next.js
description: Rialacha linnteála sonracha Next.js do Ultracite.
---

Tá rialacha linnteála sonracha Next.js sa chumraíocht seo do bharrfheabhsú íomhánna, struchtúr doiciméid, agus patrúin an App Router.

## Suiteáil

Cuir an chumraíocht Next.js le do `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Forbhreathnú

Cuirfidh an chumraíocht seo rialacha sonracha le forbairt Next.js:

- **Barrfheabhsú Íomhá**: Éilíonn sé úsáid an Next.js Image component
- **Struchtúr Doiciméid**: Cosain úsáid neamhchruinn na gcomhpháirteanna speisialta Next.js
- **Comhpháirteanna Cliant**: Déan cinnte go láimhseáiltear comhpháirteanna cliant asíncrónacha i gceart
- **Comhaid Cumraíochta**: Láimhseáil speisialta do chomhaid `next.config.*`

## Rialacha Sonracha Next.js

### Turgnamh

| Rialacha | Socrú | Cur Síos |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Cosc ar chomhpháirteanna cliant asíncrónacha i Next.js. Ba chóir go mbeadh comhpháirteanna cliant síncrónach; bain úsáid as comhpháirteanna freastalaí do oibríochtaí asíncrónacha. |

### Feidhmíocht

| Rialacha | Socrú | Cur Síos |
|------|---------|-------------|
| `noImgElement` | `error` | Cosc ar úsáid an eilimint HTML `<img>`. Bain úsáid as an Next.js `<Image>` component ina ionad chun barrfheabhsú íomhá uathoibríoch a fháil. |

### Stíl

| Rialacha | Socrú | Cur Síos |
|------|---------|-------------|
| `noHeadElement` | `error` | Cosc ar úsáid an eilimint HTML `<head>`. Bain úsáid as `next/head` de Next.js nó an metadata API an App Router ina ionad. |

### Amhrasach

| Rialacha | Socrú | Cur Síos |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | Cosc ar `next/document` a iompórtáil i gcomhaid leathanach. Ba chóir `_document.tsx` a bheith ann ach amháin i `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Cosc ar `next/head` a iompórtáil i `_document.tsx`. Bain úsáid as `<Head>` ó `next/document` ina ionad. |

## Athshocruithe Comhad Cumraíochta

Cuimsíonn an réamhshocrú Next.js láimhseáil speisialta do chomhaid chumraíochta agus do chomhpháirteanna App Router:

### Comhaid Cumraíochta Next.js

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Ceadaíonn sé seo patrúin chumraíochta Next.js nach gcuirfeadh pas orthu rialacha linnteála de ghnáth.

### Leathanaigh agus Leagan Amach App Router

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Ceadaítear do chomhpháirteanna leathanach agus leagan amach an App Router a bheith asíncrónacha gan `await` a éileamh, mar go láimhseálann Next.js iad seo go speisialta do rindreáil ar thaobh an fhreastalaí agus do fháil sonraí.